<template>
  <div>
     <header class="header">
      <h1>todos</h1>
      <!-- 拿到输入的数据 通过回车触发事件-->
      <input class="new-todo" placeholder="请输入任务名称" autofocus v-model.trim="name" @keyup.enter="add"/>
    </header>
  </div>
</template>

<script>
export default {
  name: 'VuetodoTodoHeader',

  data() {
    return {
      name:''
    };
  },

  mounted() {
    
  },

  methods: {
    add(){
      // 子传父，给主组件传拿到的输入值
      this.$emit('add', this.name);
      // 输入框清空
      this.name=''
    }
  },
};
</script>

<style scoped>

</style>